<template>
	<view style="padding: 1rem;padding-top: 0.5rem;">
		<view style="margin-bottom: 1rem;">
			<button type="primary" v-if="current" @click="flipMode">{{ current.mode }} ( {{current.year}}年)</button>
		</view>
		<view style="display: flex; justify-content: space-between;">
			<!-- 左边显示的月份列表 -->
			<view style="width:100px; flex-shrink: 0;">
				<uni-list>
					<uni-list-item v-for="(month,index) in monthList" :clickable="true" thumb-size="base" ellipsis="2"
						:title="month" :key="month" @click="monthClick(index)"
						:style="{'color': 'gray', 'background-color' : (index==currentMonth?'#ffff99': '' )}">
						<template v-slot:body>
							<text style="font-size: 18px;text-align: center;width: 100%; font-weight: bold;"
								:class="{ 'itemSelected': index == currentMonth }">
								{{ month }}
							</text>
						</template>
					</uni-list-item>
				</uni-list>
			</view>
			<!-- 右边显示选中的日期列表 -->
			<view style="flex-grow: 1; text-align: right; background-color: #ffffdd;margin-left: 0.5rem;">
				<uni-grid :column="3" v-if="dayList" :showBorder="false" :square="false">
					<uni-grid-item v-for="(day,index) in dayList" :key="index" :clickable="true"
						@click="daySelected(index)"
						:style="{'color': 'gray', 'background-color' : (index==currentDay?'#ffff99': '' )}">
						<view class="griditem">
							<view style="text-align: center;width: 100%;">
								<view style="font-size: 18px;font-weight: bold;color: blueviolet;">{{ day }}</view>
								<view style="font-size: 18px;color: gray; color: green;">{{getGanZhi(index).getText()}}
								</view>
							</view>
						</view>
					</uni-grid-item>
				</uni-grid>
			</view>
		</view>
	</view>
</template>

<script lang="ts">
	import { MonthDayItem } from './entity';
	import { dateUtil } from '../../common/dateUtil';
	import { GanZhi } from '../../common/ganzhi';
	import { ChinaDate } from '../../common/ChinaDate'
	import { JieQi } from '../../common/jieqi';

	export default {
		data() {
			return {
				current: undefined as MonthDayItem,
				monthList: [] as string[],
				currentMonth: 0,
				leapMonth: 0,
				dayList: undefined as string[],
				currentDay: 0,
			}
		},
		mounted() {
			const eventChannel : UniApp.EventChannel = (this as any).getOpenerEventChannel();
			eventChannel.on('init', (item : MonthDayItem) => {
				// if (!item) {
				// 	console.log("init-参数丢失");
				// } else {
				// 	console.log(item);
				// }
				this.current = item;
				this.currentMonth = item.monthIndex;
				if (item.day > 0) this.currentDay = item.day - 1;
				this.refreshMonths();
			})
		},
		methods: {
			async flipMode() {
				if (this.current.mode == '公历' && (this.current.year < 1901 || this.current.year > 2100)) {
					await uni.showToast({
						title: "此年份不能按农历查询",
						icon: 'none',
						duration: 2000,
					})
				} else {
					this.current.mode = this.current.mode == '公历' ? '农历' : '公历';
					this.refreshMonths();
				}
			},
			refreshMonths() {
				if (!this.current) return;
				let list = [] as string[];
				this.leapMonth = 0;
				if (this.current.mode == '公历') {
					list.push('01月', '02月', '03月', '04月', '05月', '06月', '07月', '08月', '09月', '10月', '11月', '12月');
				} else {
					let monthcount = dateUtil.getMonthsInYear(this.current.year);
					let leapmonth = dateUtil.getLeapMonth(this.current.year);
					for (let xx = 0; xx < monthcount; xx++) {
						let display = xx + 1;
						if (leapmonth > 0 && xx + 1 >= leapmonth) display--;
						list.push(ChinaDate.getMonthText(display, leapmonth - 1 == xx))
					}
					this.leapMonth = leapmonth;
				}
				this.monthList = list;
				this.monthClick(this.currentMonth ?? 0);
			},
			monthClick(monthIndex : number) {
				this.currentMonth = monthIndex;
				let list = [] as string[];
				if (this.current.mode == '公历') {
					let daycount = dateUtil.getDaysInMonthByDate(this.current.year, monthIndex);
					for (let xx = 1; xx <= daycount; xx++) {
						list.push(xx.toString() + '日');
					}
					//获取节气
					let jq1 = JieQi.getJieQi(this.current.year, monthIndex * 2);
					let jq2 = JieQi.getJieQi(this.current.year, monthIndex * 2 + 1);
					list[jq1.getDate() - 1] = JieQi.getJieQiName(monthIndex * 2);
					list[jq2.getDate() - 1] = JieQi.getJieQiName(monthIndex * 2 + 1);
				} else {
					// console.log("monthclick:" + (monthIndex?.toString() ?? ""))
					let daycount = dateUtil.getDaysInMonth(this.current.year, monthIndex + 1);
					for (let xx = 1; xx <= daycount; xx++) {
						list.push(ChinaDate.getDayText(xx))
					}
					let start = ChinaDate.getDateFromChina(this.current.year, monthIndex + 1, 1);
					let end = new Date(this.current.year, start.getMonth(), start.getDate() + daycount + 1);
					let jqarray = JieQi.getJieQiArrayByRange(start, end);
					console.log(dateUtil.FormatDate(start, "yyyy-MM-dd") + " " + dateUtil.FormatDate(end, "yyyy-MM-dd") + " " + (daycount ?? ""));
					for (var xx = 0; xx < jqarray.length; xx++) {
						let china = ChinaDate.getChinaDate(jqarray[xx].date);
						//if (china.MonthInner != monthIndex + 1) continue;
						list[china.Day - 1] = jqarray[xx].name;
						console.log(china.getText())
					}
				}
				this.dayList = list;
			},
			getGanZhi(dayIndex : number) : GanZhi {
				let date = new Date(this.current.year, this.currentMonth, dayIndex + 1);
				if (this.current.mode == '农历') {
					date = ChinaDate.getDateFromChina(this.current.year, this.currentMonth + 1, dayIndex + 1);
				};
				// console.log("getGanZhi:");
				// console.log(dateUtil.FormatDate(date,"yyyy-MM-dd"))
				return GanZhi.getGanzhiFromDate(date);
			},
			daySelected(dayIndex : number) {
				this.currentDay = dayIndex;
				this.current.month = this.currentMonth + 1;
				this.current.monthIndex = this.currentMonth;
				this.current.leapMonth = this.leapMonth;
				this.current.day = this.currentDay + 1;
				// 获取事件通道
				const eventChannel : UniApp.EventChannel = (this as any).getOpenerEventChannel();

				// 先返回上一页
				uni.navigateBack();

				// 发送数据（注意：必须在navigateBack之后执行，否则页面已销毁）
				eventChannel.emit('selected', this.current);
			},
		}
	}
</script>

<style>
	.griditem {
		height: 60px;
		display: flex;
		align-items: center;
	}

	.itemSelected {
		font-weight: bold;
	}
</style>